<template>
  <el-card class="page-title-container" style="height: 60px">
    <h2 class="page-title">个人信息</h2>
  </el-card>

  <div class="user-info-container">
    <div class="basic-info-content">
      <el-form :model="userInfo" label-width="120px" class="info-form">
        <el-row :gutter="24">
          <!-- 左列 -->
          <el-col :span="12">
            <el-form-item label="登录账户">
              <el-input v-model="userInfo.username" disabled />
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="userInfo.departmentname" disabled />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.phone" />
            </el-form-item>
          </el-col>
          <!-- 右列 -->
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="userInfo.realname" disabled />
            </el-form-item>
            <el-form-item label="岗位">
              <el-input v-model="userInfo.rolename" disabled />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userInfo.email" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSaveBasicInfo">保存</el-button>
          <el-button @click="handleResetBasicInfo">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
/**
 * 个人信息页面组件
 * 功能：显示和编辑用户基本信息，修改密码
 */

import { ref, reactive, onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useCounterStore } from '@/stores/counter'
import { useRouter, useRoute } from 'vue-router'
import myaxios from '@/Http/http'

// ==================== 初始化 ====================
const store = useCounterStore() // Pinia store 实例
const route = useRoute()

onMounted(() => {
  let routeractive = route.query.activeTab
  // alert(routeractive)
  activeTab.value = routeractive
})
// ==================== 数据定义 ====================

/**
 * 当前激活的标签页
 * 'basic': 基本资料
 * 'password': 修改密码
 */
const activeTab = ref<any>('basic')

/**
 * 用户基本信息
 */
const userInfo = reactive({
  id: store.userinfo.userid, //用户id
  username: store.userinfo.username, // 登录账户（不可编辑）
  realname: store.userinfo.realname, // 姓名
  departmentid: store.userinfo.departmentid, //部门Id
  departmentname: store.userinfo.departmentname, // 部门名称
  roleid: store.userinfo.roleid, //角色Id
  rolename: store.userinfo.rolename, // 岗位
  phone: store.userinfo.phone, // 手机号
  email: store.userinfo.email, // 邮箱
})

// ==================== 生命周期 ====================

/**
 * 组件挂载时加载用户信息
 */
onMounted(() => {
  loadUserInfo()
})

// ==================== 方法定义 ====================

/**
 * 加载用户信息
 * 从 store 或 API 获取用户信息
 */
const loadUserInfo = () => {
  // TODO: 从 API 或 store 加载用户信息
  // 示例：从 store 获取（当前 store.userinfo 未定义，需要根据实际情况调整）
  // if (store.userinfo?.realname) {
  //   userInfo.name = store.userinfo.realname
  // }
  // 可以在这里调用 API 获取完整的用户信息
}

/**
 * 保存基本信息
 */
const handleSaveBasicInfo = () => {
  // TODO: 调用 API 保存用户信息

  myaxios.post('/api/Users/UpdateUser', userInfo).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.message)

      // 保存用户真实姓名到 store
      store.userinfo.phone = res.data.result.phone || ''
      store.userinfo.email = res.data.result.email || ''
    } else {
      ElMessage.error(res.data.message)
    }
  })
  console.log('保存的用户信息:', userInfo)
}

/**
 * 重置基本信息
 */
const handleResetBasicInfo = () => {
  // TODO: 重新加载用户信息
  loadUserInfo()
  ElMessage.info('已重置')
}
</script>

<style scoped>
/**
 * ==================== 个人信息页面样式 ====================
 */

/* 容器样式 */
.user-info-container {
  padding: 0;
  background: #fff;
  /* min-height: calc(100vh - 60px); 减去 header 高度 */
  box-sizing: border-box;
  width: 100%;
  height: 300px;
}

/* 页面标题 */
.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
  /* padding: 24px 24px 16px 24px; */
  /* border-bottom: 1px solid #ebeef5; */
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 标签页样式 */
.info-tabs {
  width: 100%;
}

/* 标签页内容区域 */
.basic-info-content,
.password-content {
  padding: 24px 0;
}

/* 表单样式 */
.info-form,
.password-form {
  max-width: 800px;
}

/* 表单项样式优化 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  transition: all 0.3s;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #f5f7fa;
  box-shadow: 0 0 0 1px #e4e7ed inset;
}

/* 按钮样式 */
:deep(.el-button) {
  padding: 10px 20px;
  font-size: 14px;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, rgba(0, 82, 217, 1) 0%, #764ba2 100%);
  border: none;
}

:deep(.el-button--primary:hover) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 82, 217, 0.3);
}

/* 标签页头部样式 */
:deep(.el-tabs__header) {
  margin-bottom: 24px;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 500;
  padding: 0 24px;
  height: 48px;
  line-height: 48px;
  transition: all 0.3s;
}

:deep(.el-tabs__item:hover) {
  color: rgba(0, 82, 217, 1);
}

:deep(.el-tabs__item.is-active) {
  color: rgba(0, 82, 217, 1);
  font-weight: 600;
}

:deep(.el-tabs__active-bar) {
  background: rgba(0, 82, 217, 1);
  height: 3px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-info-container {
    padding: 16px;
  }

  .info-form,
  .password-form {
    max-width: 100%;
  }

  :deep(.el-col) {
    width: 100% !important;
    margin-bottom: 0;
  }
}

.page-title-container {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
